<template>
  <div class="regist-wrapper">
    <h3 class="register-title">
      <el-icon><Document /></el-icon>
      <p class="title-text">窗口挂号</p>
    </h3>
    <el-divider />
    <div>
      <el-button type="primary" plain @click="save">挂号</el-button>
      <el-button type="primary" plain>清空</el-button>
    </div>
    <el-descriptions
      style="margin-top: 20px;"
      title="基本信息"
      :column="3"
      size="default"
      border>
      <el-descriptions-item label="病历号">
        <el-input v-model="lyform.caseNumber"></el-input>
      </el-descriptions-item>
      <el-descriptions-item label="姓名">
        <el-input v-model="lyform.realName"></el-input>
      </el-descriptions-item>
      <el-descriptions-item label="身份证号">
        <el-input v-model="lyform.cardNumber" @blur="doneCardNumber"></el-input>
      </el-descriptions-item>
      <el-descriptions-item label="性别">
        <el-select v-model="lyform.gender" disabled>
          <el-option label="男" value="男"></el-option>
          <el-option label="女" value="女"></el-option>
        </el-select>
      </el-descriptions-item>
      <el-descriptions-item label="年龄">
        <el-input v-model="lyform.age" readonly></el-input>
      </el-descriptions-item>
      <el-descriptions-item label="生日">
        <el-input v-model="lyform.birthday" readonly></el-input>
      </el-descriptions-item>
      <el-descriptions-item label="家庭住址">
        <el-input v-model="lyform.homeAddress"></el-input>
      </el-descriptions-item>
    </el-descriptions>

    <el-descriptions
      style="margin-top: 20px;"
      title="挂号信息"
      :column="3"
      size="default"
      border>
      <el-descriptions-item label="结算类别">
        <el-radio-group v-model="lyform.settleCategoryId">
          <el-radio
            v-for="item in registerData.settles"
            :key="item.id"
            :value="item.id">{{item.settleName}}</el-radio>
        </el-radio-group>
      </el-descriptions-item>
      <el-descriptions-item label="看诊日期">
        <el-input v-model="lyform.visitDate" readonly></el-input><!--readonly 只读-->
      </el-descriptions-item>
      <el-descriptions-item label="午别">
        <el-input v-model="lyform.noon" readonly></el-input><!--readonly 只读-->
      </el-descriptions-item>
      <el-descriptions-item label="挂号科室">
        <el-select v-model="lyform.deptmentId" filterable @change="getEmp"> <!--filterable 筛选 -->
          <el-option
            v-for="item in registerData.depts"
            :key="item.id"
            :value="item.id"
            :label="item.name"></el-option><!--下拉框---可选的值。-->
        </el-select><!--下拉选择功能-->
      </el-descriptions-item>
      <el-descriptions-item label="号别">
        <el-select v-model="lyform.registLevelId" filterable @change="getEmp">
          <el-option
            v-for="item in registerData.levels" 
            :key="item.id"
            :value="item.id"
            :label="item.name"></el-option><!--后端返回的数据下拉框-->
        </el-select>
      </el-descriptions-item>
      <el-descriptions-item label="看诊医生">
        <el-select v-model="lyform.employeeId" filterable @change="getRegisterCount">
          <el-option
            v-for="item in registerData.emps"
            :key="item.id"
            :value="item.id"
            :label="item.realname"></el-option>
        </el-select>
      </el-descriptions-item>
      <el-descriptions-item label="初始号额">
        <el-input v-model="quota" readonly></el-input>
      </el-descriptions-item>
      <el-descriptions-item label="已用号额">
        <el-input v-model="quotaCount" readonly></el-input>
      </el-descriptions-item>
      <el-descriptions-item label="病历本">
        <el-switch v-model="lyform.isBook" active-text="要" inactive-text="否" active-value="要" inactive-value="否" @change="changeIsBook"></el-switch>
      </el-descriptions-item>
      <el-descriptions-item label="应收金额">
        <el-input v-model="lyform.registMoney" readonly></el-input>
      </el-descriptions-item>
      <el-descriptions-item label="收费方式">
        <el-select v-model="lyform.registMethod">
          <el-option label="现金" value="现金"></el-option>
          <el-option label="银行卡" value="银行卡"></el-option>
          <el-option label="微信" value="微信"></el-option>
          <el-option label="医保卡" value="医保卡"></el-option>
          <el-option label="支付宝" value="支付宝"></el-option>
        </el-select>
      </el-descriptions-item>
    </el-descriptions>
    <!-- v-html 指令用于将 payContent 的值解析为 HTML 内容并插入到 id 为 payform 的 div 中-->
    <div id="payform" v-html="payContent"></div>
  </div>
</template>

<script setup >
import { Document } from '@element-plus/icons-vue'
import dayjs from 'dayjs'
import { nextTick, reactive, ref } from 'vue'
import { get ,post} from '@/utils/axios'
const payContent = ref('')
const lyform = reactive({
  caseNumber: '',
  realName: '',
  gender: '',
  cardNumber: '',
  birthday: '',
  age: null,
  ageType: '年',
  homeAddress: '',
  visitDate: '',
  noon: '',
  deptmentId: null,
  employeeId: null,
  registLevelId: null,
  settleCategoryId: null,
  isBook: '否',
  registMethod: '',
  registMoney: 0
})
const quota = ref(0)
const quotaCount = ref(0)
const noonJson = { AM: '上午', PM: '下午' } // 上午、下午
const registerData = reactive({ // 请求后端返回的数据
  settles: [],
  depts: [],
  levels: [],
  emps: []
})
const date = new Date()
init()
getRegisterData()
function init () {
  lyform.caseNumber = dayjs(date).format('YYYYMMDDHHmmssSSS')
  lyform.visitDate = dayjs(date).format('YYYY-MM-DD HH:mm:ss')
  lyform.noon = noonJson[dayjs(date).format('A')] //根据当前时间判断上午下午
}
function doneCardNumber () {
  lyform.age = dayjs(date).diff(dayjs(lyform.cardNumber.substring(6, 14)), 'year')
  lyform.birthday = dayjs(lyform.cardNumber.substring(6, 14)).format('YYYY-MM-DD')
  lyform.gender = parseInt(lyform.cardNumber.substring(16, 17)) % 2 === 0 ? '女' : '男'
}
function getRegisterData () {
  get('/register/getRegisterData', {}, content => {
    registerData.settles = content.settles
    registerData.depts = content.depts
    registerData.levels = content.levels
  })
}
function getEmp () {
  if (lyform.registLevelId) {
    for (const i in registerData.levels) {
      if (lyform.registLevelId === registerData.levels[i].id) {
        quota.value = registerData.levels[i].quota
        lyform.registMoney = registerData.levels[i].fee /100
      }
    }
  }
  if (lyform.deptmentId && lyform.registLevelId) {
    get('/employee/getRegisterEmp', {
      week: date.getDay(),
      noon: dayjs(date).format('A'),
      deptId: lyform.deptmentId,
      registLevelId: lyform.registLevelId }, content => {
        registerData.emps = content
    })
  }
}
function getRegisterCount () {
  get('/register/getRegisterCount', {
    visitDate: dayjs(date).format('YYYY-MM-DD'),
    noon: lyform.noon,
    employeeId: lyform.employeeId }, content => {
      quotaCount.value = content
    })
}
function changeIsBook(value){
  if(value==='要'){
    lyform.registMoney ++
  }else{
    lyform.registMoney --
  }
}
function save () {
  post('/register/add', lyform, content => {
    payContent.value = content
    nextTick(() => { // 延迟执行
      document.querySelector('#payform').firstChild.submit()  // 获取表单 并提交表单
    })
  })
}
</script>


<style lang='scss' scoped>
.el-switch {
  --el-switch-on-color: #00ff00;
  --el-switch-off-color: #ff0000;
}
.regist-wrapper {
  .register-title {
    display: flex;
    height: 40px;
    align-items: center;
    .title-text {
      margin-left: 5px;
    }
  }
}
</style>